<template >
  <el-header>
    <el-row>
      <el-col :span="12"><div id="SystemName" style="color: white" class="grid-content bg-purple">{{msg}}</div></el-col>
      <el-col :span="11">

        <div class="grid-content bg-purple-light" style="text-align: right;color:white ">
           你好，{{username}}
          <el-popover  placement="top" width="160" v-model="visible2">
            <p style="text-align: center">确定退出？<br><br/></p>
            <div style="text-align: center;height: 50px;margin: 0">
              <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
              <el-button type="primary" size="mini" @click="exit">确定</el-button>
            </div>
            <el-button slot="reference" style="font-size: 20px ;border: 0;background-color:#479eff ;color: #e6e3ff" class="iconfont icon-jion-tuichu2"></el-button>
          </el-popover>
        </div>
      </el-col>
      <el-col :span="1">
        <div  style="text-align: left">
          <el-button type="text" @click="changePassWord = true" style="font-size: 24px ;border: 0;background-color:#479eff;color: #e6e3ff" class="iconfont icon-jion-3"></el-button>
          <el-dialog title="修改密码" :visible.sync="changePassWord" :close-on-click-modal="false" style="width: 850px;left: 18%"  >
            <el-form v-model="form2" status-icon :rules="rules2" ref="form2"  class="demo-ruleForm">
              <el-form-item label="原密码"  prop="oldPassWord">
                <el-input style="width:300px" type="text" v-model="form2.oldPassWord" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="新密码"  prop="NewPassWord">
                <el-input style="width:300px" type="password" v-model="form2.NewPassWord" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="再一次" prop="NewPassWord2">
                <el-input style="width:300px" type="password" v-model="form2.NewPassWord2" autocomplete="off"></el-input>
              </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="closeForm">取 消</el-button>
              <el-button type="primary" @click="submit">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </el-col>
    </el-row>
  </el-header>
</template>
<style scoped>

  .el-header{
    background-color: #479eff;
    color: #333;
    text-align: left;
    line-height: 60px;
  }

  #SystemName{
    width: 100%;
    color: #303133;
    font-size: 23px;
    font-family: "Heiti TC";
    font-weight: bold;
  }
</style>

<script>

    export default {

        data() {
          var validateOld = (rule, value, callback) => {
            if (this.form2.oldPassWord ==='') {
              callback(new Error('密码不能为空'));
            } else {
              callback();
            }
          };
          var validateNew = (rule, value, callback) => {
            if (this.form2.NewPassWord ==='') {
              callback(new Error('密码不能为空'));
            }else {callback();}
          };

          var validateNew2 = (rule, value, callback) => {
            if (this.form2.NewPassWord2 ==='') {
              callback(new Error('密码不能为空'));
            }else if (this.form2.NewPassWord !== this.form2.NewPassWord2) {
              callback(new Error('两次输入密码不一致!'));
            } else {
              callback();
            }
          };
            return {
              visible2: false,
              msg: '测试平台',
              username:window.localStorage.getItem('username'),
              form2: {
                oldPassWord: '',
                NewPassWord: '',
                NewPassWord2: ''
              },
              subform:{
                name:'',
                passWord:'',
                newPassWord:''
              },
              changePassWord: false,
              rules2: {
                oldPassWord: [{validator: validateOld, trigger: 'blur'}],
                NewPassWord: [{validator: validateNew, trigger: 'blur'}],
                NewPassWord2: [{validator: validateNew2, trigger: 'blur'}]
              }
            }
        },
        methods:{
          submit:function () {
            if(this.form2.oldPassWord !=''&&this.form2.NewPassWord2 !=''&&this.form2.NewPassWord2!=''){
              this.subform.name = window.localStorage.getItem("username");
              this.subform.passWord = this.form2.oldPassWord;
              this.subform.newPassWord = this.form2.NewPassWord;
              this.$axios.post("/api/updatePassWord",this.subform).then(Response=>{
                this.$notify({
                  message:Response.data.msg,
                  duration: 1000
                })
                this.form2.oldPassWord='';
                this.form2.NewPassWord='';
                this.form2.NewPassWord2='';

              })
              this.changePassWord=false;
            }else {
              this.$notify({
                message:"输入为空，不可提交",
                duration: 1000
              })
            }
          },
          closeForm:function () {
            this.changePassWord=false;
            this.form2.oldPassWord='';
            this.form2.NewPassWord='';
            this.form2.NewPassWord2='';
            },
          exit:function () {
            this.visible2 = false;
            window.localStorage.setItem("username",'');
            this.$router.push({path: '/Login'});
          }
        },



    }

</script>
